<style scoped>
.resetPass-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url("../../assets/img/img (3).jpg");
  background-size: cover;
}

.resetPass-box {
  width: 500px;
  height: 380px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 20px;
  background-color: rgba(223,212,213,0.2);
  background-size: cover;
}
.resetPass{
  width: 50%;
  margin: 20px 130px;
  padding: 5px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}
</style>

<template>
  <div class="resetPass-container">
    <div class="resetPass-box">
      <h2>重置密码</h2>
      <el-form style="margin-top: 50px" :rules="rules" :model="user" ref="registerRef">
        <el-form-item  label-width="128" label="您的用户名：" prop="username">
          <el-input style="width: 250px" v-model="user.username"/>
        </el-form-item>
        <el-form-item  label-width="128" label="您的邮箱：" prop="email">
          <el-input style="width: 250px" v-model="user.email"/>
        </el-form-item>
        <el-form-item label-width="128" label="您的密码：" prop="password">
          <el-input style="width: 250px" v-model="user.password" type="password" show-password/>
        </el-form-item>
        <el-form-item label-width="128" label="确认密码：" prop="twoPass">
          <el-input style="width: 250px" v-model="user.twoPass" type="password" show-password/>
        </el-form-item>
        <el-form-item label-width="128"  label="验证码：">
          <el-input style="width: 250px" v-model="user.code"/>
          <el-button style="margin-left: 20px" type="primary" @click="getVerifyCode">发送验证码</el-button>
        </el-form-item>
      </el-form>
      <div class="resetPass">
      <el-button type="warning" style="margin-left: 20px" @click="forgetPassAndVerify">确认更改</el-button>
      <el-button type="success" style="margin-left: 20px" @click="router.push('/user/login')">返回登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {forgetPass, getCode} from "../../apis/UserApi.js";
import {elPrompt} from "../../utils/elPrompt.ts";
import router from "../../router/router.js";

const user = ref({
  username:'',
  password:'',
  twoPass:'',
  email:'',
  code:'',
})

const registerRef = ref()

const rules=ref({
  username:[{ validator:checkUsername,trigger: 'blur'}],
  password:[{ validator:checkPassword,trigger: 'blur'}],
  twoPass:[{ validator:checkPassTwo,trigger: 'blur'}],
  email:[{ validator:checkEmail,trigger: 'blur'}],
})


function getVerifyCode(){
  getCode(user.value.username,user.value.email,(result)=>{
    console.log(result.data)
  })
}

function forgetPassAndVerify(){
  forgetPass(user.value.email,user.value.password,user.value.email,(result)=>{
    elPrompt("操作成功！","success")
  })
}


function checkUsername(rule,value,callback){
  const regular = /^[a-zA-Z0-9_]{4,16}$/
  if (value === ''){
    callback(new Error('请输入用户名！'))
  }else if(!regular.test(value)){
    callback(new Error('用户名长度为4-16位！且由字母、数字或下划线组成！'))
  }else{
    callback()
  }
}

function checkPassword(rule,value,callback){
  const regular = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*]{6,}$/;
  if (value === ''){
    callback(new Error('请输入密码！'))
  }else if(!regular.test(value)){
    callback(new Error('至少6个字符 包含至少一个大写字母、一个小写字母和一个数字 可以包含特殊字符（例如：!@#$%^&*）'))
  }else{
    callback()
  }
}

function checkEmail(rule,value,callback){
  const regular = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (value === ''){
    callback(new Error('请输入邮箱！'))
  }else if(!regular.test(value)){
    callback(new Error('请输入正确的邮箱格式'))
  }else{
    callback()
  }
}


function checkPassTwo(rule,value,callback){
  if (user.value.password !== value ){
    callback(new Error('两次密码不相同！'))
  }else{
    callback()
  }
}
</script>
